import React, { useState } from 'react';
import { AddTodoForm } from './AddTodoForm';
import { TodoList } from './TodoList';


const initialTodos: Todo[] = [
  {
    text: 'Walk the dog',
    complete: false
  },
  {
    text: 'Write app',
    complete: false
  }
]

function App() {

  const [todos, setTodos] = useState(initialTodos);

  const toggleTodo:ToggleTodo = (selectedTodo: Todo) => {
    const newTodos = todos.map(todo => {
      if (todo === selectedTodo) {
        return {
          ...todo,
          complete: !todo.complete
        }
      }
      return todo;
    })
    setTodos(newTodos);
  }

  const addTodo:AddTodo = (text: string) => {
    const newTodo = {text, complete: false};
    setTodos([...todos, newTodo]);
  }

  return (
    <div className="App">
      <TodoList todos={todos} toggleTodo={toggleTodo}></TodoList>
      <AddTodoForm addTodo={addTodo}></AddTodoForm>
    </div>
  );
}

export default App;
